<template>
  <div>
    <p style="text-align: center">登陆</p>
    <van-form>
      <van-field v-model="user.username" name="用户名" label="账号" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="user.password" label="密码" name="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 2.6rem;">
        <van-button round block @click="login">账号登录</van-button>
      </div>
      <div>
        <span @click="register">注册账号</span>
        <span @click="ForgotPassword">忘记密码</span>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'YanxuanshangchengLogin',
  data() {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    // 账号登陆
    login() {
      this.$post(this.$api.authLogin, this.user).then(res => {
        // 登陆不成功
        if (res.data.errmsg !== '成功') {
          return console.log('密码错误')
        }
        // 成功登录操作
        console.log(res.data)
        // 2小时后失效，获取当前的时间 给当前的时间 + 2个小时 把时间复制给expirse
        const curDate = Date.now() + 2 * 60 * 60 * 1000 // 获取当前时间 + 2 个小时的毫秒数
        this.$cookie.set('username', JSON.stringify(res.data.data.userInfo))
        // 存储 token
        this.$cookie.set('token', res.data.data.token, {
          // 设置过期时间
          expires: new Date(curDate) // 创建指定时间戳对应的日期对象
        })
        // 跳转到用户页
        this.$router.push('/tabbar/user')
      })
    },
    // 注册按钮
    register() {
      this.$router.push('/register')
    },
    // 忘记密码
    ForgotPassword() {
      this.$router.push('/forgotpassword')
    }
  }
}
</script>

<style lang="less" scoped>
.van-form {
  margin-top: 60%;
  .van-field {
    border-bottom: 0.1rem solid #ccc;
  }
  .van-button {
    color: #fff;
    background-color: #ab956c;
  }
  > div {
    display: flex;
    justify-content: space-between;
    span {
      padding: 0 1rem;
    }
  }
}
</style>
